<script setup lang="ts">
import { onMounted, ref, type Ref } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import EleConsumption from '@/components/historical/EleConsumption.vue';
import Temperature from '@/components/historical/Temperature.vue';
import Volts from '@/components/historical/Volts.vue';
import Electricity from '@/components/historical/Electricity.vue';
import Power from '@/components/historical/Power.vue';

const route = useRoute()
const router = useRouter()
const deviceID: Ref<string | string[]> = ref(route.params.deviceID)

/**
 * 返回到设备管理界面
 */
function backtoDevice() {
    router.push({ name: 'Device' })
}
/**
 * 选择哪个数据选项，以及切换对应的组件
 * @param id 数据选项的ID
 */
let componentName: Ref<any> = ref(EleConsumption); // 切换的组件
function selectDataChoice(id: number) {
    const choiceDiv: HTMLElement | null = document.getElementById(`choice${id}`);
    const currentDiv: HTMLCollectionOf<Element> = document.getElementsByClassName('activeChoice');
    if (choiceDiv) {
        if (currentDiv) {
            currentDiv[0].classList.remove('activeChoice')
        }
        choiceDiv.classList.add('activeChoice')
    }
    if (id == 1) {
        componentName.value = EleConsumption;
    } else if (id == 2) {
        componentName.value = Temperature;
    } else if (id == 3) {
        componentName.value = Volts;
    } else if (id == 4) {
        componentName.value = Electricity;
    } else if (id == 5) {
        componentName.value = Power;
    }
}
</script>

<template>
    <div class="historicalContainer">
        <div class="header">
            <div class="back" @click="backtoDevice">
                <img src="@/assets/images/back.png" alt="">
                返回
            </div>
            <div class="devieceID">
                <img src="@/assets/images/device.png" alt="">
                设备ID：{{ deviceID }}
            </div>
            <div class="deviceType">
                <img src="@/assets/images/type.png" alt="">
                电器类型：空调
            </div>
            <div class="dataChoice firstChoice activeChoice" id="choice1" @click="selectDataChoice(1)">
                用电量数据
            </div>
            <div class="dataChoice" id="choice2" @click="selectDataChoice(2)">
                温度数据
            </div>
            <div class="dataChoice" id="choice3" @click="selectDataChoice(3)">
                电压数据
            </div>
            <div class="dataChoice" id="choice4" @click="selectDataChoice(4)">
                电流数据
            </div>
            <div class="dataChoice" id="choice5" @click="selectDataChoice(5)">
                功率数据
            </div>
        </div>
        <div class="routerSpot">
            <!-- 动态切换历史数据组件 -->
            <component :is="componentName"></component>
        </div>
    </div>
</template>

<style scoped>
.historicalContainer {
    width: 100%;
}

.header {
    display: flex;
    width: 100%;
    height: 40px;
    margin: 10px auto;
    border-bottom: 1px solid #596074;
    line-height: 40px;
    font-size: 14px;
    /* letter-spacing: 1px; */
}

.devieceID {
    margin-left: 150px;
}


.header div img {
    height: 16px;
    vertical-align: text-bottom;
}

.deviceType {
    width: 200px;
    margin-left: 30px;
}

.back {
    margin-left: 10px;
    cursor: pointer;
}

.dataChoice {
    width: 120px;
    height: 30px;
    margin-top: 10px;
    text-align: center;
    line-height: 30px;
    border: 1px solid #596074;
    cursor: pointer;
}

.firstChoice {
    margin-left: 250px;
}

.activeChoice {
    background-color: rgba(74, 82, 101, 0.3);
    border-bottom: 1px solid var(--base-color);
}

.routerSpot {
    width: 100%;
    height: 820px;
}
</style>